<template>
  <div>
  
  <el-table
    ref="multipleTable"
    class="admin_table"
    tooltip-effect="dark"
    :row-style="tableRowStyle"
    :data="tableData"
     @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
          type="selection"
          width="55">
    </el-table-column>
    <el-table-column
      prop="work_id"
      label="工号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="realname"
      label="用户名"
      width="150">
    </el-table-column>
    <el-table-column
      prop="identity"
      label="身份"
      width="150">
    </el-table-column>
    <el-table-column
      prop="create_time"
      label="创建日期"
      width="200">
    </el-table-column>
    <el-table-column
      prop="last_login_time"
      label="上一次登录时间"
      width="200">
    </el-table-column>
    <el-table-column
        label="操作">
      <template slot-scope="scope">
       <el-button type="warning" size="small"  
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
    <el-table-column
        label="状态">
      <template slot-scope="scope">
        <el-button size="mini" type="danger" v-if = "scope.row.buttonVisible" @click = "changeTable(scope.row.buttonVisible,scope.$index)">禁用</el-button>
        <el-button size="mini" type="primary" v-else @click = "changeTable(scope.row.buttonVisible,scope.$index)">启用</el-button>
      </template>
    </el-table-column>

  </el-table>
<!-- 编辑 弹框-->
    <el-dialog title="编辑" :visible.sync="editFormVisible":close-on-click-modal="false"
               class="edit-form">
    
        <el-form :model="editForm" label-width="110px" ref="editForm">
          <el-form-item label="工号" prop="work_id">
            <el-input v-model="editForm.work_id" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="用户名" prop="name">
            <el-input v-model="editForm.realname" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份" prop="identity">
             <el-input v-model="editForm.identity" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建日期" prop="identity">
             <el-input v-model="editForm.create_time" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="上一次登录时间" prop="identity">
             <el-input v-model="editForm.last_login_time" auto-complete="off" :disabled="true"></el-input>
          </el-form-item>
        </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click.native="handleUpdate('editForm')">更新</el-button>
            <el-button @click.native="handleCancel('editForm')">取消</el-button>
           </div>
      </el-dialog>
  </div>
</template>

<script>
  export default {
  methods: {
 //禁用启用按钮转换
    changeTable (buttonVisible, index) {
      this.tableData[index].buttonVisible = !buttonVisible
      },
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      if (this.tableData[rowIndex].buttonVisible === false) {
       return 'background-color: rgba(243,243,243,1)'
      }
    },
  //弹出框改变表格数据
    handleCurrentChange:function () {
this.tableData.push({work_id:this.editForm.work_id,realname:this.editForm.realname,identity:this.editForm.identity,create_time:this.editForm.create_time,last_login_time:this.editForm.last_login_time});
    },
        //删除最后一行数据
    delRow(index, row){
      this.tableData.splice(this.tableData.indexOf(row),1);
    },
        //删除当前行数据
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
      //编辑
    handleEdit: function (index, row) {
      this.editFormVisible = true;//dialog对话窗口打开
      this.editForm = Object.assign({}, row);//将数据传入dialog页面
      this.editForm.index=index;//传递当前index
    },
      //取消
    handleCancel(formName) {
      this.editFormVisible = false;
    },
     //更新
    handleUpdate(forName) {
      //dialog页面数据写入到tableData页面上
      //this.$set(tableName,talbeIndex,data)
      this.$set(this.tableData,this.editForm.index,{work_id:this.editForm.work_id,realname:this.editForm.realname,identity:this.editForm.identity,create_time:this.editForm.create_time,last_login_time:this.editForm.last_login_time});
      this.editFormVisible = false;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
   },

  data() {
    return {
      buttonban:'primary',
      editForm: {
        work_id: '',
        realname: '',
        identity:'',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        index:0
        },
        //定义属性
        work_id:undefined,
        realname:undefined,
        identity:undefined,
        //默认dialog弹窗不打开（true打开，false为不打开）
        editFormVisible: false,
      tableData: [{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      }, {
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      },{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      },{
        work_id:'TradeCode0' ,
        realname: '王小虎',
        identity: '办公室老师',
        create_time: '2020-1-1',
        last_login_time: '2020-3-5',
        buttonVisible: true
      }]
    }
  }
}
</script>
<style scoped>
.admin_table{
  margin-bottom: 30px;
}
.table_btn{
  padding-bottom: 20px;
  float: right;
}
</style>